<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>滚动监听body区域</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            position: relative;
            top: 50px;
        }

        p {
            height: 580px;
        }
    </style>
</head>

<body body data-spy="scroll" data-target="#navbar-example" >
    <!-- 菜单导航 -->
    <nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#h5">HTML5</a></li>
            <li><a href="#c3">CSS3</a></li>
            <li><a href="#jquery">jQuery</a></li>
            <li><a href="#boot">Bootstrap</a></li>
        </ul>
    </nav>

    <h4 id="h5">HTML5</h4>
    <p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。</p>
    <h4 id="c3">CSS3</h4>
    <p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。<br>
        CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。</p>
    <h4 id="jquery">jQuery</h4>
    <p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do
        More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    </p>
    <h4 id="boot">Bootstrap</h4>
    <p>Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web
        开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking
        News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
    </p>

</body>

</html>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    //1、将距离顶部的偏移像素更改为60
    // $('body').scrollspy({ offset: 60 })
    // 2、滚动监听事件的使用
    /* $('#navbar-example').on('activate.bs.scrollspy', function () {
        // 执行一些动作...
    }) */
</script>